<template>
    <div>
        <!-- 添加网站分类 -->
        <a-modal :width="600"
                 :title="title"
                 v-model="visible"
                 @cancel="handleCancel">
            <template slot="footer">
                <div class="drawer-bootom-button">
                    <a-popconfirm title="确定放弃编辑？"
                                  @confirm="handleCancel"
                                  okText="确定"
                                  cancelText="取消">
                        <a-button key="back">关闭</a-button>
                    </a-popconfirm>
                    <a-button key="submit"
                              type="primary"
                              :loading="loading"
                              @click="handleOk">保存
                    </a-button>
                </div>
            </template>
            <a-form :form="form"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
                <a-form-item label="网站名称">
                    <a-input placeholder="请输入网站名称"
                             v-decorator="[ 'name', validatorRules.name]" />
                </a-form-item>
                <a-form-item label="网站状态">
                    <a-select v-decorator="[ 'state', validatorRules.state]"
                              placeholder="请选择状态!">
                        <a-select-option value="0">
                            已删除
                        </a-select-option>
                        <a-select-option value="1">
                            正常
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="网站描述">
                    <a-textarea placeholder="请输入网站描述!"
                                :rows="2"
                                v-decorator="[ 'description']" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import { addWebsiteCategory, updatedWebsiteCategory } from '@/api/api'
import pick from "lodash/pick";
export default {
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
            visible: false,
            loading: false,
            title: '',
            categories: [],
            form: this.$form.createForm(this),
            validatorRules: {
                name: {
                    rules: [{
                        required: true,
                        message: '请输入网站名称!',
                    }]
                },
                url: {
                    rules: [{
                        required: true,
                        message: '请输入跳转链接!',
                    }]
                },
                state: {
                    rules: [{
                        required: true,
                        message: '请输入跳转链接!',
                    }]
                },
            },
        }
    },
    methods: {
        add(categoryList) {
            this.edit({ id: '' });
        },
        edit(record) {
            this.form.resetFields();
            this.visible = true;
            this.model = Object.assign({}, record);
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(record, 'name', 'state', 'description'))
            });
            this.id = record.id;
        },
        handleCancel() {
            this.visible = false;
        },
        handleOk() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.loading = true;
                    let formData = Object.assign(this.model, values);
                    let requestFn;
                    if (!this.model.id) {//新增
                        this.loading = true;
                        requestFn = addWebsiteCategory(formData).then(res => {
                            if (res.code === 200) {
                                this.loading = false;
                                this.$message.success("添加成功!");
                                this.$emit('ok');
                                this.visible = false;
                            }
                        })
                    } else {//编辑
                        requestFn = updatedWebsiteCategory(this.id, formData).then(res => {
                            if (res.code === 200) {
                                this.loading = false;
                                this.$message.success("操作成功!");
                                this.$emit('ok');
                                this.visible = false;
                            }
                        })
                    }
                } else {

                }
            })
        }
    },
}
</script>

<style>
</style>